<template>
	<view class="container">
		<view class="section-text">普通搜索</view>
		<es-filter-search :value="value1"  @input="onInput($event,'value1')" @clear="onClear($event,'value1')"></es-filter-search>
		
		<view class="section-text">地区选择+搜索</view>
		<es-filter-search filter-type="area" :filter-param="filterParam1" :value="value2"
		 @input="onInput($event,'value2')" @clear="onClear($event,'value2')" @filterChange="onFilterChange"></es-filter-search>
		
		
		<view class="section-text">下拉选择+搜索</view>
		<es-filter-search filter-type="select" :filter-param="filterParam2" :value="value3"
		 @input="onInput($event,'value3')" @clear="onClear($event,'value3')" @filterChange="onFilterChange"></es-filter-search>
		 
		 <es-filter-search filter-type="select" :filter-param="filterParam3" :value="value3"
		  @input="onInput($event,'value3')" @clear="onClear($event,'value3')" @filterChange="onFilterChange"></es-filter-search>
		
	</view>
</template>

<script>
	// import esFilterSearch from "/components/es-filter-search/es-filter-search";
	
	const sortOptions = [{
			value: '',
			label: '综合'
		},
		{
			value: 'distance',
			label: '距离最近'
		},
		{
			value: 'hot',
			label: '人气最高'
		},
		{
			value: 'sales',
			label: '销量最高'
		},
		{
			value: 'price',
			label: '价格最低'
		}
	];

	const finenessOptions = [{
			value: "全新",
			label: "全新"
		}, {
			value: "几乎全新",
			label: "几乎全新"
		}, {
			value: "轻微使用痕迹",
			label: "轻微使用痕迹"
		}, {
			value: "明显使用痕迹",
			label: "明显使用痕迹"
		},
	];

	const countryOptions = [{
			value: "CHN",
			label: "中国",
			img: "/static/images/country/CHN.png"
		},
		{
			value: "KOR",
			label: "韩国",
			img: "/static/images/country/KOR.png"
		},
		{
			value: "JPN",
			label: "日本",
			img: "/static/images/country/JPN.png"
		},
		{
			value: "CMR",
			label: "CMR",
			img: "/static/images/country/CMR.png"
		},
		{
			value: "CRO",
			label: "CRO",
			img: "/static/images/country/CRO.png"
		},
		{
			value: "CUB",
			label: "CUB",
			img: "/static/images/country/CUB.png"
		},
		{
			value: "CZE",
			label: "CZE",
			img: "/static/images/country/CZE.png"
		},
		{
			value: "DEN",
			label: "DEN",
			img: "/static/images/country/DEN.png"
		},
		{
			value: "ECU",
			label: "ECU",
			img: "/static/images/country/ECU.png"
		},
		{
			value: "EGY",
			label: "EGY",
			img: "/static/images/country/EGY.png"
		},
		{
			value: "ENG",
			label: "ENG",
			img: "/static/images/country/ENG.png"
		},
		{
			value: "GER",
			label: "GER",
			img: "/static/images/country/GER.png"
		},
		{
			value: "HUN",
			label: "HUN",
			img: "/static/images/country/HUN.png"
		},
		{
			value: "FRA",
			label: "FRA",
			img: "/static/images/country/FRA.png"
		}
	];

	export default {
		components: {
			// esFilterSearch
		},
		data() {
			return {
				sortOptions:sortOptions,
				finenessOptions:finenessOptions,
				countryOptions:countryOptions,
				filterParam1:{
					name:'地区',
					label:"莆田"
				},
				filterParam2:{
					name:'国家',
					label:"",
					options:countryOptions,
					multiple:true,
					column:2
				},
				filterParam3:{
					name:'排序',
					label:"",
					options:sortOptions,
				},
				value1:"",
				value2:"",
				value3:"",
			}
		},
		methods: {
			onFilterChange(e){
				console.log(e)
			},
			onInput(e,name){
				this[name] = e.detail.value;
			},
			onClear(e,name){
				this[name] = "";
			},
			onChange(filterList) {
				console.log(filterList)
				//todo 根据接口请求参数dto封装请求参数
				// {
				// 	 key:value
				// }
			},
			onClose(e) {
				
			}
		},
		onShareTimeline() {
			return {
				title: '组件-搜索筛选',
				imageUrl: "/static/images/logo.png",
			}
		},
		onShareAppMessage() {
			return {
				title: '组件-搜索筛选',
				imageUrl: "/static/images/logo.png",
			}
		},
	}
</script>

<style scoped>
	.container {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
	}
	.mt30{
		margin-top: 30rpx;
	}
	.section-text{
		width: 750rpx;
		padding: 30rpx;
		font-size: 26rpx;
		color: #B6B6B6;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
</style>